<template>
	<view class="imgDownload-container">
		<image class="img" :src="imgUrl"/>
		<button @click="imgDownload">图片下载</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:"/static/logo.png"
			}
		},
		methods: {
			imgDownload(){
				const task = uni.downloadFile({
					url:"https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg",
					success: (res) => {
						console.log(res.tempFilePath);
this.imgUrl = res.tempFilePath;
					}
				})
				task.onProgressUpdate((res)=>{
					console.log("当前下载进度：" + res.progress);	
					console.log("已下载进度：" + res.totalBytesWritten);	
					console.log("总大小：" + res.totalBytesExpectedToWrite	);	
				})
			}

		}
	}
</script>

<style>
	.imgDownload-container{
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
.img{
	width: 500rpx;
	height: 500rpx;
}
	
.imgDownload-container>button{
	margin-top: 20rpx;
}
</style>